{#
 # This file is part of the IoFormBundle package
 #
 # (c) Alessio Baglio <io.alessio@gmail.com>
 #
 # For the full copyright and license information, please view the LICENSE
 # file that was distributed with this source code.
 #}

{% use 'form_div_layout.html.twig' %}

{# put a small description here #}
{% block jquery_entity_combobox_widget %}

  {{ block('choice_widget') }}
  {% spaceless %}
  {# put this css in a appropriate block or external file #}
  <style>
	.ui-button { margin-left: -1px; }
	.ui-button-icon-only .ui-button-text { padding: 0.35em; }
	.ui-autocomplete-input { margin: 0; padding: 0.48em 0 0.47em 0.45em; }
	</style>
    {# put this code in a appropriate block #}
    <script type="text/javascript">
      $(function(){
        $( "#{{ id }}" ).autocomplete();
      	$( "#{{ id }}" ).combobox();
     });
    </script>
{% endspaceless %}

{% endblock jquery_entity_combobox_widget %}


{% block jquery_autocomplete_widget %}

    {{ block('field_widget') }}  {# render text field #}
    {% spaceless %}
    <script type="text/javascript">
      $(function(){

        $( "#{{ id }}" ).autocomplete({
            minLength: 2,

            source: "{{ url }}",

            focus: function( event, ui ) {
                    $( "#{{id}}" ).val( ui.item.value );
                    return false;
            },
            select: function( event, ui ) {
                    $( "#{{id}}" ).val( ui.item.value );
                    {% if select_callback %}
                        {{select_callback|raw}}(event, ui);
                    {% endif %}
                    return false;
            }

        })
        .data( "autocomplete" )._renderItem = function( ul, item ) {
			return $( "<li></li>" ).data( "item.autocomplete", item ).append( "<a>" + item.desc + "</a>" ).appendTo( ul );
		};

	});
    </script>
    {% endspaceless %}
{% endblock %}



{% block jquery_entity_autocomplete_widget %}
    <div>
    <label for="{{ id }}">{{ label }}</label>
    {{ block('hidden_widget') }} {# render hidden field #}
    {% set entity_id = id %}     {# set hidden field's id as entity_id #}
    {% set id = id~'_text' %}    {# set text field's id as id #}
    {% set type = type|default('text') %}
    {% set name = name~'_text' %}

	<input type="{{ type }}" name="{{ name }}"{{ block('widget_attributes') }} value="{{ value }}" />

    {# block('field_widget') #}  {# render text field #}
    {% spaceless %}
    <script type="text/javascript">
    
      $(document).ready((function(){
        {% if not callback %}
          function callback(data, cb){  cb(data); }
        {% endif %}
        $auto = $( "#{{ id }}" ).autocomplete({
            source: function(request, cb){
                var url = "{{ url }}".replace('%24%24term%24%24', request.term);
                {% if callback %}
                    $.get( url, function(data){ {{callback|raw}}(data, cb)});
                {% else %}
                    $.get( url, function(data) {callback(data, cb)});
                {% endif %}

            },
            focus: function( event, ui ) {
                    $( "#{{id}}" ).val( ui.item.label );
                    return false;
            },
            select: function( event, ui ) {
                    $( "#{{id}}" ).val( ui.item.label );
                    $( "#{{entity_id}}" ).val( ui.item.value ); {# i wish pass in hidden field item.id value but EntityIdType generate Id by property - @todo: render label on text field and id in hidden field #}
                    {% if select_callback %}
                        {{select_callback|raw}}(event, ui);
                    {% endif %}
                    return false;
            }

        });

        $auto.data( "uiAutocomplete" )._renderItem = function( ul, item ) {
			return $( "<li></li>" ).data( "item.autocomplete", item ).append( "<a>" + item.desc + "</a>" ).appendTo( ul );
		};

	}));
    </script>
    </div>
    {% endspaceless %}
{% endblock %}

{% block date_range_widget %}
    {{ form_widget(form.start) }}
    {{ form_widget(form.end) }}
{% endblock %}

{% block jquery_date_widget %}
{% spaceless %}
    {% if widget == 'single_text' %}
        {{ block('field_widget') }}

          <script>
          $(function() {
            $( "#{{ id }}" ).datepicker({
                dateFormat: '{{ dateFormat }}',
              {% for key,value in jqdate_options %}
                {{key}}: '{{value}}',
              {% endfor %}
                {#changeMonth: {{ change_month }},#}
                {#changeYear: {{ change_year }},#}
                {#minDate: '{{ min_date }}',#}
                {#maxDate: '{{ max_date }}',#}
                {#yearRange: '{{ year_range }}',#}
                {#showOn: '{{ show_on }}'#}
              });
             $( "#{{ id }}" ).datepicker("option", $.datepicker.regional[ "{{locale}}" ] );
          });
          </script>
    {% else %}
        <div {{ block('widget_container_attributes') }}>
            {{ date_pattern|replace({
                '{{ year }}':  form_widget(form.year),
                '{{ month }}': form_widget(form.month),
                '{{ day }}':   form_widget(form.day),
            })|raw }}
        </div>
    {% endif %}
{% endspaceless %}
{% endblock jquery_date_widget %}


{% block jquery_radio_widget %}
{% spaceless %}
          <div id="{{ id }}_buttonset">
        {{ block('choice_widget') }}
          </div>
        <script>
        $(function() {
            $( "#{{ id }}_buttonset" ).buttonset();
          });
         </script>

{% endspaceless %}
{% endblock jquery_radio_widget %}


{% block jquery_range_widget %}
{% spaceless %}
        {{ block('field_widget') }}
      <div id="{{ id }}_slider"></div>
        <script>
        $(function() {
            $( "#{{ id }}_slider" ).slider({
              value:{{ value }},
              min: {{ min }},
              max: {{ max }},
              step: {{ step }},
              slide: function( event, ui ) {
                $( "#{{ id }}" ).val( ui.value );
              }
            });
          });
         </script>

{% endspaceless %}
{% endblock jquery_range_widget %}

{% block jquery_tinymce_widget %}
          {{ block ('textarea_widget') }}

         <script>
          $(function(){
            $("#{{ id }}").tinymce( {{ block('tinymce_configuration') }} );
          });
          </script>

{% endblock jquery_tinymce_widget %}


{% block tinymce_configuration %}
{% spaceless %}
{
                // Location of TinyMCE script
                script_url : '{{ jquery_tinymce_asset }}',
                {# language : "{{ locale }}" , #}
                // General options
                theme : "{{ theme }}",
                {% if theme == 'advanced' %}
                {# TODO: must use a configurable value for tinymce options #}
                plugins : "autolink,lists,pagebreak,style,layer,table,save,advhr,advimage,advlink,emotions,iespell,inlinepopups,insertdatetime,preview,media,searchreplace,print,contextmenu,paste,directionality,fullscreen,noneditable,visualchars,nonbreaking,xhtmlxtras,template,advlist",
                // Theme options
                theme_advanced_buttons1 : "bold,italic,underline,strikethrough,|,justifyleft,justifycenter,justifyright,justifyfull,styleselect,formatselect,fontselect,fontsizeselect",
                theme_advanced_buttons2 : "search,replace,|,bullist,numlist,|,outdent,indent,blockquote,|,undo,redo,|,link,unlink,anchor,image,cleanup,code,forecolor,backcolor",
                theme_advanced_buttons3 : "tablecontrols,|,hr,removeformat,sub,sup,media,advhr,cite,abbr,acronym,visualchars",
                theme_advanced_toolbar_location : "top",
                theme_advanced_toolbar_align : "left",
                theme_advanced_statusbar_location : "bottom",
                theme_advanced_resizing : true
                {% endif %}
}
  {% endspaceless %}

{% endblock tinymce_configuration %}

{# TODO: should be render all scripts into same block #}
